<template>
	<view>
		<!-- 私信消息 -->
		<template v-for="(message, index) in hdMessages">
			<view v-if="!message.msgChecked" @click="toBaoBeiPage(index)" style="height: 100px; display: flex;"
				:style="{backgroundColor: viewColor[index]}">
				<!-- 头像 -->
				<view style="padding: 20px 10px 20px 20px;">
					<view class="u-demo-block">
						<view class="u-demo-block__content">
							<view class="u-page__image-item">
								<u--image shape="circle" :src="message.icon" width="60px" height="60px"></u--image>
							</view>
						</view>
					</view>
				</view>
				<!-- 文本 -->
				<view style="height: 100px; width: 100%; border-top: 1px solid #e7e6e4;">
					<view style="float: left; width: 60%;">
						<!-- 昵称 -->
						<view style="padding: 18px 10px 0px 10px;">
							<text style="font-size: 18px; font-weight: bold;">{{message.nickName}}</text>
						</view>
						<!-- 文本 -->
						<view style="padding: 0 10px 0px 10px;">
							<!-- <text style="font-size: 14px;">{{message.text}}</text> -->
							<view class="u-demo-block">
								<view class="u-demo-block__content">
									<u--text
									    :lines="1"
									    :text="message.text"
										size="14"
									></u--text>
								</view>
							</view>
						</view>
						<!-- 截短的日期 -->
						<view style="padding: 0 10px 0px 10px;">
							<text style="font-size: 14px;">{{message.date}}</text>
						</view>
					</view>
					<!-- 宝贝图片 -->
					<view style="float: right;">
						<view style="margin: 10px;">
							<u--image :src="message.goodImg" width="80px" height="80px" radius="5px"></u--image>
						</view>
					</view>
				</view>
			</view>
			
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				viewColor: [],
				hdMessages: [],
				goodMessages: [{
					userId: '2001',
					nickName: '测试昵称001',
					icon: 'http://119.29.2.163:9000/xiaomayi/img%2Fgoods%2Fpp3.png',
					good: { // 宝贝信息要拿一点
						id: '',
					},
					goodImg: 'http://119.29.2.163:9000/xiaomayi/img%2Fgoods%2F10001%2F1%2FQQ%E6%88%AA%E5%9B%BE20240910180916.png', // 图片只要第一张
					text: '便宜点出吧好哥哥,便宜点出吧好哥哥,便宜点出吧好哥哥,',
					date: '2024-09-12 16:03:11'
				}]
			}
		},
		methods: {
			toBaoBeiPage(index) {
				let that = this;
				// console.log(index)
				uni.navigateTo({
					url: '/pages/BaoBeiPage/BaoBeiPage?goodId=' + that.hdMessages[index].goodId
				});
			},
		},
		onLoad() {
			// 获取登录状态
			let that = this;
			uni.getStorage({
				key: 'user',
				success: function(res) {
					that.user = res.data;
					console.log(that.user)
				},
				fail() {
					that.user = null;
				}
			});
			// 获取本地存储的互动消息
			uni.getStorage({
				key: 'hdMessages',
				success(res) {
					that.hdMessages = res.data;
					console.log(that.hdMessages);
					for(let i = 0; i < that.hdMessages.length; i++) {
						if (that.hdMessages[i].msgChecked) {
							that.viewColor.push('#f4f4f5');
						} else {
							that.viewColor.push('#f5fff0');
						}
					}
				}
			})
		}
	}
</script>

<style>

</style>
